<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>game canvas</title>
	<script src="lib.js"></script>
	<style>
		canvas {
			margin: 59px auto;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas id="ball" width="400" height="400"></canvas>
</body>
	<script>
	var canvas = document.getElementById('ball'),
	    context = canvas.getContext('2d'),
	    ball = new Ball(),
	    angleX = 0,
	    angleY = 0,
	    range = 50,
	    centerX = canvas.width/2,
	    centerY = canvas.height /2,
	    xspeed = 0.07,
		yspeed = 0.11;

	(function drawFrame(){
		window.requestAnimationFrame(drawFrame,canvas);
		context.clearRect(0,0,canvas.width,canvas.height);
		ball.x = centerX + Math.sin(angleX) * range;
		ball.y = centerY + Math.sin(angleY) * range;
		angleX += xspeed;
		angleY += yspeed;
		ball.draw(context);
	}());
	 
	</script>
</html>